<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no">
    <meta name="format-detection" content="telephone=no,email=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">  
    <title>添加商品_常购清单_历史购买</title>
    <style>
        *{
            margin: 0;
            padding: 0
        }
       .main{
           width: 100%;
           box-sizing: border-box;
           color: #666666;
           padding-bottom: 40px
       }
       .title{
           width: 100%;
           height: 40px;
           line-height: 40px;
           font-weight: 600;
           padding-left: 15px;
           box-sizing: border-box;
           border-bottom: 1px solid #a29f9f ;
           position: relative;           

       }
       
       .content{
           width: 100%;
           padding: 5px 15px;
           box-sizing: border-box;
           border-bottom: 1px solid #a29f9f 
       }
       .content li{
           width: 100%;
           height: 40px;
           line-height: 40px;
           list-style: none;
           margin: 1px 0;
           float: left;
           font-size: .9em
       }
       .content li input{
           height: 30px;
       }
       .content li select{
           height: 30px;
           width: 50%
       }
       .btn_group{
           width: 100%;
           height: 40px;
           line-height: 40px;
           box-sizing: border-box;
           position: relative;
           text-align: right
       }
       .btn_group a{
           display: inline-block;
           height: 30px;
           line-height: 30px;
           background-color: rgb(240, 72, 68);
           color: white;
           border-radius: 5px;
           text-decoration-line: none;
           padding: 0 10px;
           font-size: .9em;
           text-decoration: none
       }
       .btn_group a.back{
           background-color: white;
           border: 1px solid #a29f9f;
           color: #666666
       }
       table{
           background-color: gainsboro;
           
       }
       table th{
           font-size: .8em;
           font-style: normal;
           text-align: center;
           height: 35px;
           line-height: 35px;
           border-bottom: 1px solid #a29f9f
       }
       table td{
           font-size: .8em;
           font-style: normal;
           text-align: center;
           padding: 3px 0;
           border-bottom: 1px solid #a29f9f
       }
       .cf:before,.cf:after {
            content:"";
            display:table;
        }
        .cf:after { clear:both; }
    </style>
</head>
<body>
    <div class="main">
        <p class="title">商品查询</p>
        <div class="content">
           <ul style="padding-left: 0;margin: 0;overflow: hidden;">
               <li>品类：
                    <select name="" id="">
                        <option value="">请选择</option>
                    </select>
                </li>
              
                <li>系列：
                    <select name="" id="">
                        <option value="">请选择</option>
                    </select>
                </li>
               
                <li>规格类：
                        <select name="" id="">
                                <option value="">请选择</option>
                        </select>
                </li>            
                <li>是否有产品政策：
                    <select name="" id="" style="width: 30%">
                        <option value="">是</option>
                    </select>
                </li>         
                <li>商品编码：<input type="text"></li>
                <li>商品名称：<input type="text"></li>
           </ul>
           <div class="btn_group">
                <a href="javascript:void(0)">查询</a> 
                <a href="javascript:void(0)">重置</a>                  
            </div>
        </div>
        <p class="title">商品信息</p>
        <table cellspacing="0">
            <thead>
                <tr>
                    <th width='10%'>序号</th>
                    <th width='12%'><input type="checkbox" id="allCheck"></th>
                    <th width='38%'>商品名称</th>
                    <th width='20%'>单价</th>
                    <th width='20%'>是否有政策</th>
                </tr>
            </thead>
            <tbody id="tbody">
                <tr>
                    <td width='10%'>1</td>
                    <td width='12%'><input type="checkbox"></td>
                    <td width='38%'>面点坊豆沙包360克1*024</td>
                    <td width='20%'>60</td>
                    <td width='20%'>无</td>
                </tr>
                <tr>
                    <td width='10%'>1</td>
                    <td width='12%'><input type="checkbox"></td>
                    <td width='38%'>面点坊豆沙包360克1*024</td>
                    <td width='20%'>60</td>
                    <td width='20%'>无</td>
                </tr>
                <tr>
                    <td width='10%'>1</td>
                    <td width='12%'><input type="checkbox"></td>
                    <td width='38%'>面点坊豆沙包360克1*024</td>
                    <td width='20%'>60</td>
                    <td width='20%'>无</td>
                </tr>
                <tr>
                    <td width='10%'>1</td>
                    <td width='12%'><input type="checkbox"></td>
                    <td width='38%'>面点坊豆沙包360克1*024</td>
                    <td width='20%'>60</td>
                    <td width='20%'>无</td>
                </tr>
                <tr>
                    <td width='10%'>1</td>
                    <td width='12%'><input type="checkbox"></td>
                    <td width='38%'>面点坊豆沙包360克1*024</td>
                    <td width='20%'>60</td>
                    <td width='20%'>无</td>
                </tr>
                <tr>
                    <td width='10%'>1</td>
                    <td width='12%'><input type="checkbox"></td>
                    <td width='38%'>面点坊豆沙包360克1*024</td>
                    <td width='20%'>60</td>
                    <td width='20%'>无</td>
                </tr>
            </tbody>
        </table>
        <div class="btn_group" style="padding-right: 15px">
                <a href="javascript:void(0)">加入购物车</a> 
                <a href="javascript:void(0)" class="back">返回</a>                  
        </div>
    </div>
    <script src="js/jquery-1.8.3.min.js"></script>
    <script>
        // 全选
      $('#allCheck').on('click',function(){
        if($(this).get(0).checked){
            $('#tbody').find('input[type=\'checkbox\']').prop('checked',true)
            
        }else{
            $('#tbody').find('input[type=\'checkbox\']').prop('checked',false)
        }
      })
    //   不全选
    $('#tbody').find('input[type=\'checkbox\']').on("change",function(){
        var checkboxSize= $('#tbody').find('input[type=\'checkbox\']').length;
        var checkedSize = $('#tbody').find('input[type=\'checkbox\']:checked').length;
        if(checkboxSize === checkedSize){
            $('#allCheck').prop("checked",true);
        }
        else{
            $('#allCheck').prop("checked",false);
        }
    })
    
      

    </script>
</body>
</html>